ডাইনামিক ট্যাব

Web Development - অ্যাঙ্গুলার ম্যাটেরিয়াল (Angular Material) - Angular Material ন্যাভিগেশন |

Angular Material এর MatTab কম্পোনেন্ট ব্যবহার করে আপনি সহজেই ট্যাব তৈরি করতে পারেন। ডাইনামিক ট্যাব তৈরি করতে Angular-এর ngFor ডিরেকটিভ ব্যবহার করতে হয়, যা আপনাকে একাধিক ট্যাবকে প্রোগ্রামেটিক্যালি তৈরি করতে সক্ষম করে। এটি সাধারণত তখন ব্যবহৃত হয় যখন ট্যাবগুলো ডাটাবেস বা API থেকে লোড হয় এবং ব্যবহারকারীর ইন্টারঅ্যাকশনের উপর ভিত্তি করে ট্যাব কন্টেন্ট পরিবর্তিত হয়।

ডাইনামিক ট্যাব তৈরি করার জন্য পদক্ষেপ

১. অ্যাঙ্গুলার ম্যাটেরিয়াল ইন্সটল করা

প্রথমে Angular Material ইন্সটল করুন (যদি আগে থেকে ইন্সটল না থাকে):

ng add @angular/material

এখানে, MatTabsModule এবং MatIconModule ইমপোর্ট করা হবে ট্যাবস এবং আইকন ব্যবহার করতে।

২. প্রয়োজনীয় মডিউল ইমপোর্ট করা

MatTabsModule এবং MatIconModule ইমপোর্ট করুন:

import { MatTabsModule } from '@angular/material/tabs';
import { MatIconModule } from '@angular/material/icon';

@NgModule({
  imports: [
    MatTabsModule,
    MatIconModule
  ]
})
export class AppModule {}

৩. ডাইনামিক ট্যাব তৈরি করার HTML

এখন, ngFor ডিরেকটিভ ব্যবহার করে ডাইনামিক ট্যাব তৈরি করা যায়। নিচে একটি উদাহরণ দেওয়া হলো যেখানে ট্যাবগুলো একটি অ্যারে থেকে ডাইনামিকভাবে লোড হচ্ছে:

<mat-tab-group>
  <mat-tab *ngFor="let tab of tabs" [label]="tab.label" [icon]="tab.icon">
    <ng-template mat-tab-label>
      <mat-icon>{{ tab.icon }}</mat-icon>
      {{ tab.label }}
    </ng-template>
    <div *ngIf="tab.content">
      <p>{{ tab.content }}</p>
    </div>
  </mat-tab>
</mat-tab-group>

এখানে, আমরা tabs নামক একটি অ্যারে ব্যবহার করছি যেখানে প্রতিটি ট্যাবের জন্য label, icon, এবং content ডাইনামিকভাবে লোড হচ্ছে।

৪. টাইপস্ক্রিপ্ট ফাইলে ডেটা যুক্ত করা

আপনার app.component.ts ফাইলে tabs অ্যারে তৈরি করুন। এখানে প্রতিটি ট্যাবের জন্য একটি অবজেক্ট রয়েছে যা label, icon, এবং content ধারণ করে।

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  tabs = [
    { label: 'Home', icon: 'home', content: 'This is the home tab' },
    { label: 'Profile', icon: 'person', content: 'This is the profile tab' },
    { label: 'Settings', icon: 'settings', content: 'This is the settings tab' }
  ];
}

এখানে, tabs অ্যারে তিনটি ট্যাবের তথ্য ধারণ করছে। প্রতিটি ট্যাবে একটি লেবেল, একটি আইকন, এবং কন্টেন্ট আছে।

৫. ডাইনামিক কন্টেন্ট প্রদর্শন করা

আপনি চাইলে ট্যাবের কন্টেন্টও ডাইনামিকভাবে পরিবর্তন করতে পারেন। যেমন, আপনি API থেকে কন্টেন্ট লোড করতে পারেন:

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  tabs = [];

  constructor(private http: HttpClient) {}

  ngOnInit() {
    // API থেকে ট্যাব ডেটা লোড করা
    this.http.get<any[]>('https://api.example.com/tabs').subscribe(data => {
      this.tabs = data;
    });
  }
}

এখানে, ngOnInit() লাইফসাইকেল হুক ব্যবহার করে API থেকে ট্যাব ডেটা লোড করা হচ্ছে এবং tabs অ্যারে আপডেট হচ্ছে।